<template>
	<div>
		<router-link tag="div" to="/" v-show="showAbs" class="header-abs">
			<div class="iconfont header-abs-back">&#xe624;</div>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			景点详情
			<router-link to="/">
			  <div class="iconfont header-fixed-back">&#xe624;</div>
			</router-link>
		</div>
	</div>
</template>

<script>
export default{
	name: 'DetailHeader',
	props:{
		sightName: String,
		bannerImg: String,
		bannerImgs: Array,
	},
	data () {
		return {
			showAbs: true,
			opacityStyle: {
				opacity: 0
			}
		}
	},
	methods: {
		handleScorll () {
			const top = document.documentElement.scrollTop
			if(top > 60 ){
				let opacity = top / 140
				opacity = opacity > 1 ? 1 :opacity
				this.opacityStyle = {
					opacity
				}
				this.showAbs = false
			}else{
				this.showAbs = true
			}
		}
	},
	created () {
		window.addEventListener('scroll',this.handleScorll)
	},
	deactivated () {
		window.removeEventListener('scroll',this.handleScorll)
	}
}
</script>

<style lang="stylus" scoped>
	 @import "~styles/varibles.styl"
	.header-abs
		position: absolute;
		left: .2rem
		top: .2rem;
		width: .8rem;
		height: .8rem;
		line-height:.8rem
		border-radius: .4rem;
		text-align: center;
		background: rgba(0,0,0,0.8)
		.header-abs-back
			color:#fff;
			font-size: .4rem;
	.header-fixed
	  position: fixed;
	  z-index:99
	  top:0;
	  left:0;
	  right:0;
	  overflow hidden;
	  height $headerHegiht;
	  line-height $headerHegiht;
	  color #fff;
	  background $bgColor;
	  font-size .32rem;
	  text-align center;
	  .header-fixed-back
	    color #fff;
	    position: absolute;
	    top: 0;
	    left: 0
	    width .64rem;
	    font-size .4rem;
	    text-align center;
</style>
